<script setup>
import { getCateListApi } from '@/api'
import { ref } from 'vue'

const cateList = ref([])
defineProps({
  modelValue: {
    type: [String, Number],
    required: true
  },
  width: {
    type: String,
    default: '220px'
  }
})
const emit = defineEmits(['update:modelValue'])

const getCateDetail = async () => {
  const res = await getCateListApi()
  cateList.value = res.data.data
}
getCateDetail()
</script>
<template>
  <el-select
    :modelValue="modelValue"
    @update:modelValue="emit('update:modelValue', $event)"
    placeholder="请选择"
    clearable
    :style="{ width }"
  >
    <el-option
      v-for="cate in cateList"
      :key="cate.id"
      :label="cate.cate_name"
      :value="cate.id"
    />
  </el-select>
</template>

<style lang="scss" scoped></style>
